<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 18 The V8 Engine | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.21 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 18 The V8 Engine | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 18 The V8 Engine | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2021-04-19" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="shiny-widgets.html"/>
<link rel="next" href="v8-ml.html"/>
<script src="libs/jquery-3.5.1/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="libs/plotly-binding-4.9.3/plotly.js"></script>
<script src="libs/typedarray-0.1/typedarray.min.js"></script>
<link href="libs/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css-1.57.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main-1.57.1/plotly-latest.min.js"></script>
<script src="libs/core-js-2.5.3/shim.min.js"></script>
<script src="libs/react-16.12.0/react.min.js"></script>
<script src="libs/react-16.12.0/react-dom.min.js"></script>
<script src="libs/reactwidget-1.0.0/react-tools.js"></script>
<script src="libs/reactable-binding-0.2.3/reactable.js"></script>
<script src="libs/r2d3-render-0.1.0/r2d3-render.js"></script>
<script src="libs/webcomponents-2.0.0/webcomponents.js"></script>
<script src="libs/r2d3-binding-0.2.5/r2d3.js"></script>
<script src="libs/d3v6-6.2.0/d3.min.js"></script>
<script src="libs/viz-1.8.2/viz.js"></script>
<link href="libs/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding-1.0.6.1/grViz.js"></script>
<link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding-0.17/datatables.js"></script>
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core-1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74544116-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74544116-1');
</script>
<meta property="og:title" content="Chapter 18 The V8 Engine | JavaScript for R">
<meta property="og:description" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta property="og:image" content="https://book.javascript-for-r.com/images/social.png">
<meta property="og:url" content="https://book.javascript-for-r.com/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Chapter 18 The V8 Engine | JavaScript for R">
<meta name="twitter:image:alt" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta name="twitter:site" content="@jdatap">


<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a><ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics and Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="intro-overview.html"><a href="intro-overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a><ul>
<li class="chapter" data-level="1.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-overview-rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a><ul>
<li class="chapter" data-level="1.2.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a><ul>
<li class="chapter" data-level="1.3.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-reactr-vuer"><i class="fa fa-check"></i><b>1.3.1</b> reactR &amp; vueR</a></li>
<li class="chapter" data-level="1.3.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a><ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-package-dev"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a><ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-create-pkg"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#basics-installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#basics-build-load-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-json"><i class="fa fa-check"></i><b>2.2</b> JSON</a><ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-tabular"><i class="fa fa-check"></i><b>2.2.2</b> Tabular Data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a><ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-chrome-devtools"><i class="fa fa-check"></i><b>2.3.1</b> Developer Tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-var-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable Declaration and Scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document Object Model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a><ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-static-files"><i class="fa fa-check"></i><b>2.4.1</b> Serving Static Files</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-htmltools"><i class="fa fa-check"></i><b>2.4.2</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-deps-pro-cons"><i class="fa fa-check"></i><b>2.4.3</b> Serving vs. htmltools</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a><ul>
<li class="chapter" data-level="3.1" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-plotly"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-dt"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
<li class="chapter" data-level="3.3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-crosstalk"><i class="fa fa-check"></i><b>3.3</b> Crosstalk</a></li>
<li class="chapter" data-level="3.4" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-conclude"><i class="fa fa-check"></i><b>3.4</b> Wrap-up</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="widgets-basics.html"><a href="widgets-basics.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a><ul>
<li class="chapter" data-level="4.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-study"><i class="fa fa-check"></i><b>4.1</b> Read and Study</a></li>
<li class="chapter" data-level="4.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates"><i class="fa fa-check"></i><b>4.2</b> Candidate Libraries</a><ul>
<li class="chapter" data-level="4.2.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-plotly"><i class="fa fa-check"></i><b>4.2.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.2.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-highcharts"><i class="fa fa-check"></i><b>4.2.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.2.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-chart.js"><i class="fa fa-check"></i><b>4.2.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-inner-workings"><i class="fa fa-check"></i><b>4.3</b> How It Works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="widgets-first.html"><a href="widgets-first.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a><ul>
<li class="chapter" data-level="5.1" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-htmloutput"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-js-files"><i class="fa fa-check"></i><b>5.3</b> JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="widgets-realistic.html"><a href="widgets-realistic.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a><ul>
<li class="chapter" data-level="6.1" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-deps"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-implementation"><i class="fa fa-check"></i><b>6.2</b> Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-html-element"><i class="fa fa-check"></i><b>6.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="widgets-full.html"><a href="widgets-full.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a><ul>
<li class="chapter" data-level="7.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-deps"><i class="fa fa-check"></i><b>7.1</b> Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-js"><i class="fa fa-check"></i><b>7.2</b> JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a><ul>
<li class="chapter" data-level="7.4.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-js"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify"><i class="fa fa-check"></i><b>7.4.2</b> Modify Serialiser</a></li>
<li class="chapter" data-level="7.4.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-replace"><i class="fa fa-check"></i><b>7.4.3</b> Replace Serialiser</a></li>
<li class="chapter" data-level="7.4.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify-data"><i class="fa fa-check"></i><b>7.4.4</b> Modify the Data</a></li>
<li class="chapter" data-level="7.4.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-conclusion"><i class="fa fa-check"></i><b>7.4.5</b> Pros and Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-on-print"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="widgets-adv.html"><a href="widgets-adv.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a><ul>
<li class="chapter" data-level="8.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-shared"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a><ul>
<li class="chapter" data-level="8.1.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prerender"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks and Security</a></li>
<li class="chapter" data-level="8.4" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-js"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prepend-append"><i class="fa fa-check"></i><b>8.5</b> Prepend and Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a><ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk Examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-req"><i class="fa fa-check"></i><b>9.2</b> Crosstalk Requirements</a></li>
<li class="chapter" data-level="9.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-inner-workings"><i class="fa fa-check"></i><b>9.3</b> How it Works</a><ul>
<li class="chapter" data-level="9.3.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-keys"><i class="fa fa-check"></i><b>9.3.1</b> Keys</a></li>
<li class="chapter" data-level="9.3.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-communication-lines"><i class="fa fa-check"></i><b>9.3.2</b> Communication Lines</a></li>
<li class="chapter" data-level="9.3.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-groups"><i class="fa fa-check"></i><b>9.3.3</b> Groups</a></li>
</ul></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with Gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-r"><i class="fa fa-check"></i><b>9.5</b> R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-js"><i class="fa fa-check"></i><b>9.6</b> JavaScript Code</a><ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-send-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send Selected Keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-set-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set Selected Keys</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-using"><i class="fa fa-check"></i><b>9.7</b> Using Crosstalk with Gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="widgets-final.html"><a href="widgets-final.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a><ul>
<li class="chapter" data-level="10.1" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets and Data</a></li>
<li class="chapter" data-level="10.2" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-interface"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
<li class="chapter" data-level="10.4" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-exercises"><i class="fa fa-check"></i><b>10.4</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="11" data-path="shiny-intro.html"><a href="shiny-intro.html"><i class="fa fa-check"></i><b>11</b> Bidirectional Communication</a><ul>
<li class="chapter" data-level="11.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-websocket"><i class="fa fa-check"></i><b>11.1</b> WebSocket an Shiny</a></li>
<li class="chapter" data-level="11.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-sessions"><i class="fa fa-check"></i><b>11.2</b> Sessions</a></li>
<li class="chapter" data-level="11.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-example"><i class="fa fa-check"></i><b>11.3</b> Alerts, an example</a><ul>
<li class="chapter" data-level="11.3.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-explore"><i class="fa fa-check"></i><b>11.3.1</b> Explore</a></li>
<li class="chapter" data-level="11.3.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-r-to-js"><i class="fa fa-check"></i><b>11.3.2</b> From R to JavaScript</a></li>
<li class="chapter" data-level="11.3.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-serialise"><i class="fa fa-check"></i><b>11.3.3</b> Serialisation</a></li>
<li class="chapter" data-level="11.3.4" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-js2r"><i class="fa fa-check"></i><b>11.3.4</b> JavaScript to R</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="shiny-complete.html"><a href="shiny-complete.html"><i class="fa fa-check"></i><b>12</b> A Complete Integration</a><ul>
<li class="chapter" data-level="12.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-discover"><i class="fa fa-check"></i><b>12.1</b> Discover</a></li>
<li class="chapter" data-level="12.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-setup"><i class="fa fa-check"></i><b>12.2</b> Setup</a></li>
<li class="chapter" data-level="12.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-dependencies"><i class="fa fa-check"></i><b>12.3</b> Dependencies</a></li>
<li class="chapter" data-level="12.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-images"><i class="fa fa-check"></i><b>12.4</b> Static Files</a></li>
<li class="chapter" data-level="12.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-skeleton"><i class="fa fa-check"></i><b>12.5</b> Skeleton</a></li>
<li class="chapter" data-level="12.6" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-r2js"><i class="fa fa-check"></i><b>12.6</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.7" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-js2r"><i class="fa fa-check"></i><b>12.7</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.8" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-input-handler"><i class="fa fa-check"></i><b>12.8</b> Input handler</a></li>
<li class="chapter" data-level="12.9" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg"><i class="fa fa-check"></i><b>12.9</b> As a Package</a><ul>
<li class="chapter" data-level="12.9.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-deps"><i class="fa fa-check"></i><b>12.9.1</b> Dependencies</a></li>
<li class="chapter" data-level="12.9.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-trigger"><i class="fa fa-check"></i><b>12.9.2</b> Trigger classification</a></li>
<li class="chapter" data-level="12.9.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-js-code"><i class="fa fa-check"></i><b>12.9.3</b> JavaScript code</a></li>
<li class="chapter" data-level="12.9.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-input-handler"><i class="fa fa-check"></i><b>12.9.4</b> Input handler</a></li>
<li class="chapter" data-level="12.9.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-test"><i class="fa fa-check"></i><b>12.9.5</b> Test</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="shiny-tips.html"><a href="shiny-tips.html"><i class="fa fa-check"></i><b>13</b> Tips and Tricks</a><ul>
<li class="chapter" data-level="13.1" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-events"><i class="fa fa-check"></i><b>13.1</b> Shiny Events</a></li>
<li class="chapter" data-level="13.2" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-table-btn"><i class="fa fa-check"></i><b>13.2</b> Table Buttons</a></li>
<li class="chapter" data-level="13.3" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-jQuery"><i class="fa fa-check"></i><b>13.3</b> jQuery</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="shiny-output.html"><a href="shiny-output.html"><i class="fa fa-check"></i><b>14</b> Custom Outputs</a><ul>
<li class="chapter" data-level="14.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inner-workings"><i class="fa fa-check"></i><b>14.1</b> Inner-workings</a></li>
<li class="chapter" data-level="14.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-setup"><i class="fa fa-check"></i><b>14.2</b> Setup</a></li>
<li class="chapter" data-level="14.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-r-fun"><i class="fa fa-check"></i><b>14.3</b> Output R Function</a></li>
<li class="chapter" data-level="14.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-html"><i class="fa fa-check"></i><b>14.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="14.5" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-renderer"><i class="fa fa-check"></i><b>14.5</b> Output Renderer</a></li>
<li class="chapter" data-level="14.6" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-binding"><i class="fa fa-check"></i><b>14.6</b> JavaScript Output Binding</a><ul>
<li class="chapter" data-level="14.6.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-title"><i class="fa fa-check"></i><b>14.6.1</b> Boxxy Title</a></li>
<li class="chapter" data-level="14.6.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-value"><i class="fa fa-check"></i><b>14.6.2</b> Boxxy Value</a></li>
<li class="chapter" data-level="14.6.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-bg-color"><i class="fa fa-check"></i><b>14.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="14.6.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-register"><i class="fa fa-check"></i><b>14.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="14.7" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-usage"><i class="fa fa-check"></i><b>14.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="14.8" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inject"><i class="fa fa-check"></i><b>14.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="14.9" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-preprocess"><i class="fa fa-check"></i><b>14.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="shiny-input.html"><a href="shiny-input.html"><i class="fa fa-check"></i><b>15</b> Custom Inputs</a><ul>
<li class="chapter" data-level="15.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-setup"><i class="fa fa-check"></i><b>15.1</b> Setup</a></li>
<li class="chapter" data-level="15.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-intro"><i class="fa fa-check"></i><b>15.2</b> Switch Input HTML and Style</a></li>
<li class="chapter" data-level="15.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-html"><i class="fa fa-check"></i><b>15.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="15.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-binding"><i class="fa fa-check"></i><b>15.4</b> JavaScript Input Binding</a><ul>
<li class="chapter" data-level="15.4.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-find"><i class="fa fa-check"></i><b>15.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="15.4.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-id"><i class="fa fa-check"></i><b>15.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="15.4.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-value"><i class="fa fa-check"></i><b>15.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="15.4.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-set-value"><i class="fa fa-check"></i><b>15.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="15.4.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-receive-msg"><i class="fa fa-check"></i><b>15.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="15.4.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-sub-unsub"><i class="fa fa-check"></i><b>15.4.6</b> Subscribe and Unsubscribe Inputs</a></li>
<li class="chapter" data-level="15.4.7" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-rate-policy"><i class="fa fa-check"></i><b>15.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="15.4.8" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-register"><i class="fa fa-check"></i><b>15.4.8</b> Registering the Input Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-update"><i class="fa fa-check"></i><b>15.5</b> Update Input</a></li>
<li class="chapter" data-level="15.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-excercise"><i class="fa fa-check"></i><b>15.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="shiny-cookies.html"><a href="shiny-cookies.html"><i class="fa fa-check"></i><b>16</b> Cookies</a><ul>
<li class="chapter" data-level="16.1" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-discover"><i class="fa fa-check"></i><b>16.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="16.2" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-setup"><i class="fa fa-check"></i><b>16.2</b> Setup Project</a></li>
<li class="chapter" data-level="16.3" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="16.4" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-r-code"><i class="fa fa-check"></i><b>16.4</b> R Code</a></li>
<li class="chapter" data-level="16.5" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-exercises"><i class="fa fa-check"></i><b>16.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="shiny-widgets.html"><a href="shiny-widgets.html"><i class="fa fa-check"></i><b>17</b> Widgets with Shiny</a><ul>
<li class="chapter" data-level="17.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-to-r"><i class="fa fa-check"></i><b>17.1</b> Widgets to R</a></li>
<li class="chapter" data-level="17.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handlers"><i class="fa fa-check"></i><b>17.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="17.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-r-to-widgets"><i class="fa fa-check"></i><b>17.3</b> R to Widgets</a><ul>
<li class="chapter" data-level="17.3.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-send-data"><i class="fa fa-check"></i><b>17.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="17.3.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-retrieve"><i class="fa fa-check"></i><b>17.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="17.3.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handle-data"><i class="fa fa-check"></i><b>17.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-proxy"><i class="fa fa-check"></i><b>17.4</b> Proxy Function</a></li>
<li class="chapter" data-level="17.5" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-clear-data"><i class="fa fa-check"></i><b>17.5</b> Clear Data</a></li>
<li class="chapter" data-level="17.6" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-update"><i class="fa fa-check"></i><b>17.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="18" data-path="v8.html"><a href="v8.html"><i class="fa fa-check"></i><b>18</b> The V8 Engine</a><ul>
<li class="chapter" data-level="18.1" data-path="v8.html"><a href="v8.html#v8-installation"><i class="fa fa-check"></i><b>18.1</b> Installation</a></li>
<li class="chapter" data-level="18.2" data-path="v8.html"><a href="v8.html#v8-basics"><i class="fa fa-check"></i><b>18.2</b> Basics</a></li>
<li class="chapter" data-level="18.3" data-path="v8.html"><a href="v8.html#v8-external"><i class="fa fa-check"></i><b>18.3</b> External Libraries</a></li>
<li class="chapter" data-level="18.4" data-path="v8.html"><a href="v8.html#v8-npm"><i class="fa fa-check"></i><b>18.4</b> NPM Packages</a></li>
<li class="chapter" data-level="18.5" data-path="v8.html"><a href="v8.html#v8-pkg"><i class="fa fa-check"></i><b>18.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="v8-ml.html"><a href="v8-ml.html"><i class="fa fa-check"></i><b>19</b> Machine Learning</a><ul>
<li class="chapter" data-level="19.1" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-dependency"><i class="fa fa-check"></i><b>19.1</b> Dependency</a></li>
<li class="chapter" data-level="19.2" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-regression"><i class="fa fa-check"></i><b>19.2</b> Simple Regression</a></li>
<li class="chapter" data-level="19.3" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-exercises"><i class="fa fa-check"></i><b>19.3</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>V Robust JavaScript</b></span></li>
<li class="chapter" data-level="20" data-path="webpack-intro.html"><a href="webpack-intro.html"><i class="fa fa-check"></i><b>20</b> Managing JavaScript</a><ul>
<li class="chapter" data-level="20.1" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-example"><i class="fa fa-check"></i><b>20.1</b> Example</a></li>
<li class="chapter" data-level="20.2" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-browser"><i class="fa fa-check"></i><b>20.2</b> Transpiling</a></li>
<li class="chapter" data-level="20.3" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-minification"><i class="fa fa-check"></i><b>20.3</b> Minification</a></li>
<li class="chapter" data-level="20.4" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-structure"><i class="fa fa-check"></i><b>20.4</b> Bundling and Modules</a></li>
<li class="chapter" data-level="20.5" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-decouple"><i class="fa fa-check"></i><b>20.5</b> Decoupling</a></li>
<li class="chapter" data-level="20.6" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-npm"><i class="fa fa-check"></i><b>20.6</b> NPM</a></li>
<li class="chapter" data-level="20.7" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-conclude"><i class="fa fa-check"></i><b>20.7</b> With R</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html"><i class="fa fa-check"></i><b>21</b> Discover Webpack and NPM</a><ul>
<li class="chapter" data-level="21.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install"><i class="fa fa-check"></i><b>21.1</b> Installation</a><ul>
<li class="chapter" data-level="21.1.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-mac"><i class="fa fa-check"></i><b>21.1.1</b> Mac OS</a></li>
<li class="chapter" data-level="21.1.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-ubuntu"><i class="fa fa-check"></i><b>21.1.2</b> Ubuntu</a></li>
<li class="chapter" data-level="21.1.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-windows"><i class="fa fa-check"></i><b>21.1.3</b> Windows</a></li>
<li class="chapter" data-level="21.1.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-other"><i class="fa fa-check"></i><b>21.1.4</b> Other</a></li>
</ul></li>
<li class="chapter" data-level="21.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-setup"><i class="fa fa-check"></i><b>21.2</b> Set Up the App</a></li>
<li class="chapter" data-level="21.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-init-npm"><i class="fa fa-check"></i><b>21.3</b> Initialise NPM</a></li>
<li class="chapter" data-level="21.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-pkgs"><i class="fa fa-check"></i><b>21.4</b> Installing NPM Packages</a></li>
<li class="chapter" data-level="21.5" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-entry-points"><i class="fa fa-check"></i><b>21.5</b> Entry Point and Output</a></li>
<li class="chapter" data-level="21.6" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-conf"><i class="fa fa-check"></i><b>21.6</b> Configuration File</a></li>
<li class="chapter" data-level="21.7" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-npm-scripts"><i class="fa fa-check"></i><b>21.7</b> NPM scripts</a></li>
<li class="chapter" data-level="21.8" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-webpack-mode"><i class="fa fa-check"></i><b>21.8</b> Source maps</a></li>
<li class="chapter" data-level="21.9" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-bundle"><i class="fa fa-check"></i><b>21.9</b> Bundle</a></li>
<li class="chapter" data-level="21.10" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-internal-dependencies"><i class="fa fa-check"></i><b>21.10</b> Internal Dependencies</a></li>
<li class="chapter" data-level="21.11" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-external-dependencies"><i class="fa fa-check"></i><b>21.11</b> External Dependencies</a></li>
<li class="chapter" data-level="21.12" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export"><i class="fa fa-check"></i><b>21.12</b> Import and Export</a><ul>
<li class="chapter" data-level="21.12.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-named"><i class="fa fa-check"></i><b>21.12.1</b> Named</a></li>
<li class="chapter" data-level="21.12.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-default"><i class="fa fa-check"></i><b>21.12.2</b> Default</a></li>
<li class="chapter" data-level="21.12.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-wrap-up"><i class="fa fa-check"></i><b>21.12.3</b> Wrap-up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="22" data-path="packer-overview.html"><a href="packer-overview.html"><i class="fa fa-check"></i><b>22</b> Webpack with R</a><ul>
<li class="chapter" data-level="22.1" data-path="packer-overview.html"><a href="packer-overview.html#packer-principles"><i class="fa fa-check"></i><b>22.1</b> Principles of packer</a></li>
<li class="chapter" data-level="22.2" data-path="packer-overview.html"><a href="packer-overview.html#packer-scaffolds"><i class="fa fa-check"></i><b>22.2</b> Scaffolds</a></li>
<li class="chapter" data-level="22.3" data-path="packer-overview.html"><a href="packer-overview.html#packer-inputs"><i class="fa fa-check"></i><b>22.3</b> Inputs</a></li>
<li class="chapter" data-level="22.4" data-path="packer-overview.html"><a href="packer-overview.html#packer-r-file"><i class="fa fa-check"></i><b>22.4</b> R file</a></li>
<li class="chapter" data-level="22.5" data-path="packer-overview.html"><a href="packer-overview.html#packer-js-files"><i class="fa fa-check"></i><b>22.5</b> JavaScript Files</a></li>
<li class="chapter" data-level="22.6" data-path="packer-overview.html"><a href="packer-overview.html#packer-bundle"><i class="fa fa-check"></i><b>22.6</b> Bundle</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="packer-adv.html"><a href="packer-adv.html"><i class="fa fa-check"></i><b>23</b> Webpack Advanced</a><ul>
<li class="chapter" data-level="23.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-widgets"><i class="fa fa-check"></i><b>23.1</b> Widgets</a></li>
<li class="chapter" data-level="23.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue"><i class="fa fa-check"></i><b>23.2</b> Shiny with Vue and Bootstrap 4</a><ul>
<li class="chapter" data-level="23.2.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-setup"><i class="fa fa-check"></i><b>23.2.1</b> Setup</a></li>
<li class="chapter" data-level="23.2.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-bs4"><i class="fa fa-check"></i><b>23.2.2</b> Bootstrap 4 Installation</a></li>
<li class="chapter" data-level="23.2.3" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-code"><i class="fa fa-check"></i><b>23.2.3</b> Vue Code</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a><ul>
<li class="chapter" data-level="24.1" data-path="conclusion.html"><a href="conclusion.html#conclusion-performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#conclusion-trial-and-error"><i class="fa fa-check"></i><b>24.2</b> Trial and Error</a></li>
<li class="chapter" data-level="24.3" data-path="conclusion.html"><a href="conclusion.html#conclusion-ux"><i class="fa fa-check"></i><b>24.3</b> Functionality and UX</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="v8" class="section level1">
<h1><span class="header-section-number">Chapter 18</span> The V8 Engine</h1>
<p>V8 is an R interface to Google’s open-source JavaScript engine of the same name; it powers Google Chrome, Node.js, and many other things. It is the last integration of JavaScript with R that is covered in this book. Both the V8 package and the engine it wraps are straightforward yet amazingly powerful.</p>
<div id="v8-installation" class="section level2">
<h2><span class="header-section-number">18.1</span> Installation</h2>
<p>First, install the V8 engine itself, instructions to do so are well detailed on <a href="https://github.com/jeroen/v8#installation">V8’s README</a> and below.</p>
<p>On Debian or Ubuntu use the code below from the terminal to install <a href="https://v8.dev/">libv8</a>.</p>
<div class="sourceCode" id="cb345"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb345-1" title="1"><span class="fu">sudo</span> apt-get install -y libv8-dev</a></code></pre></div>
<p>On Centos install v8-devel, which requires the EPEL tools.</p>
<div class="sourceCode" id="cb346"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb346-1" title="1"><span class="fu">sudo</span> yum install epel-release</a>
<a class="sourceLine" id="cb346-2" title="2"><span class="fu">sudo</span> yum install v8-devel</a></code></pre></div>
<p>On Mac OS use <a href="https://brew.sh/">Homebrew</a>.</p>
<div class="sourceCode" id="cb347"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb347-1" title="1"><span class="ex">brew</span> install v8</a></code></pre></div>
<p>Then install the R package from CRAN.</p>
<div class="sourceCode" id="cb348"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb348-1" title="1"><span class="kw">install.packages</span>(<span class="st">&quot;V8&quot;</span>)</a></code></pre></div>
</div>
<div id="v8-basics" class="section level2">
<h2><span class="header-section-number">18.2</span> Basics</h2>
<p>V8 provides an JavaScript execution environment through returning a closure-based object with <code>v8()</code>; Each of such environments is independent of another.</p>
<div class="sourceCode" id="cb349"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb349-1" title="1"><span class="kw">library</span>(V8)</a>
<a class="sourceLine" id="cb349-2" title="2"></a>
<a class="sourceLine" id="cb349-3" title="3">engine &lt;-<span class="st"> </span><span class="kw">v8</span>()</a></code></pre></div>
<p>The <code>eval</code> method allows running JavaScript code from R.</p>
<div class="sourceCode" id="cb350"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb350-1" title="1">engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;var x = 3 + 4;&quot;</span>) <span class="co"># this is evaluated in R</span></a>
<a class="sourceLine" id="cb350-2" title="2">engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;x&quot;</span>)</a>
<a class="sourceLine" id="cb350-3" title="3"><span class="co">#&gt; [1] &quot;7&quot;</span></a></code></pre></div>
<p>Two observations are worth making on the above snippet of code. First, the variable we got back in R is a character vector when it should have been either an integer or a numeric. This is because we used the <code>eval</code> method, which returns what is printed in the V8 console, but <code>get</code> is more appropriate; it converts the output to its appropriate R equivalent.</p>
<div class="sourceCode" id="cb351"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb351-1" title="1"><span class="co"># retrieve the previously created variable</span></a>
<a class="sourceLine" id="cb351-2" title="2">(x &lt;-<span class="st"> </span>engine<span class="op">$</span><span class="kw">get</span>(<span class="st">&quot;x&quot;</span>))</a>
<a class="sourceLine" id="cb351-3" title="3"><span class="co">#&gt; [1] 7</span></a>
<a class="sourceLine" id="cb351-4" title="4"><span class="kw">class</span>(x)</a>
<a class="sourceLine" id="cb351-5" title="5"><span class="co">#&gt; [1] &quot;integer&quot;</span></a></code></pre></div>
<p>Second, while creating a scalar with <code>eval("var x = 1;")</code> appears painless, imagine if you will the horror of having to convert a data frame to a JavaScript array via jsonlite then flatten it to character string so it can be used with the <code>eval</code> method. Horrid. Thankfully V8 comes with a method <code>assign</code>, complimentary to <code>get</code>, which declares R objects as JavaScript variables. It takes two arguments, first the name of the variable to create, second the object to assign to it.</p>
<div class="sourceCode" id="cb352"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb352-1" title="1"><span class="co"># assign and retrieve a data.frame</span></a>
<a class="sourceLine" id="cb352-2" title="2">engine<span class="op">$</span><span class="kw">assign</span>(<span class="st">&quot;vehicles&quot;</span>, cars[<span class="dv">1</span><span class="op">:</span><span class="dv">3</span>, ])</a>
<a class="sourceLine" id="cb352-3" title="3">engine<span class="op">$</span><span class="kw">get</span>(<span class="st">&quot;vehicles&quot;</span>)</a>
<a class="sourceLine" id="cb352-4" title="4"><span class="co">#&gt;   speed dist</span></a>
<a class="sourceLine" id="cb352-5" title="5"><span class="co">#&gt; 1     4    2</span></a>
<a class="sourceLine" id="cb352-6" title="6"><span class="co">#&gt; 2     4   10</span></a>
<a class="sourceLine" id="cb352-7" title="7"><span class="co">#&gt; 3     7    4</span></a></code></pre></div>
<p>All of the conversion is handled by V8 internally with jsonlite, as demonstrated in the previous chapter. We can confirm that the data frame was converted to a list row-wise, using <code>JSON.stringify</code> to display how the object is stored in V8.</p>
<div class="sourceCode" id="cb353"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb353-1" title="1"><span class="kw">cat</span>(engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;JSON.stringify(vehicles, null, 2);&quot;</span>))</a>
<a class="sourceLine" id="cb353-2" title="2"><span class="co">#&gt; [</span></a>
<a class="sourceLine" id="cb353-3" title="3"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb353-4" title="4"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb353-5" title="5"><span class="co">#&gt;     &quot;dist&quot;: 2</span></a>
<a class="sourceLine" id="cb353-6" title="6"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb353-7" title="7"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb353-8" title="8"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb353-9" title="9"><span class="co">#&gt;     &quot;dist&quot;: 10</span></a>
<a class="sourceLine" id="cb353-10" title="10"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb353-11" title="11"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb353-12" title="12"><span class="co">#&gt;     &quot;speed&quot;: 7,</span></a>
<a class="sourceLine" id="cb353-13" title="13"><span class="co">#&gt;     &quot;dist&quot;: 4</span></a>
<a class="sourceLine" id="cb353-14" title="14"><span class="co">#&gt;   }</span></a>
<a class="sourceLine" id="cb353-15" title="15"><span class="co">#&gt; ]</span></a></code></pre></div>
<p>However this reveals a tedious cyclical loop: 1) creating an object in JavaScript to 2) run a function on the aforementioned object, 3) get the results back in R, and repeat. So V8 also allows calling JavaScript functions on R objects directly with the <code>call</code> method and obtains the results back in R.</p>
<div class="sourceCode" id="cb354"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb354-1" title="1">engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;new Date();&quot;</span>) <span class="co"># using eval</span></a></code></pre></div>
<pre><code>#&gt; [1] &quot;Sun Oct 18 2020 18:34:45 GMT+0200 
  (Central European Summer Time)&quot;</code></pre>
<div class="sourceCode" id="cb356"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb356-1" title="1">engine<span class="op">$</span><span class="kw">call</span>(<span class="st">&quot;Date&quot;</span>, <span class="kw">Sys.Date</span>()) <span class="co"># using call</span></a></code></pre></div>
<pre><code>#&gt; [1] &quot;Sun Oct 18 2020 18:34:45 GMT+0200 
  (Central European Summer Time)&quot;</code></pre>
<p>Finally, one can run code interactively rather than as strings by calling the console from the engine with <code>engine$console()</code>. You can then exit the console by typing <code>exit</code> or hitting the <kbd>ESC</kbd> key.</p>
</div>
<div id="v8-external" class="section level2">
<h2><span class="header-section-number">18.3</span> External Libraries</h2>
<p>V8 is quite bare in and of itself; there is, for instance, no functionalities built in to read or write files from disk. It thus becomes truly interesting when you can leverage JavaScript libraries. We’ll demonstrate this using <a href="https://fusejs.io/">fuse.js</a> a fuzzy-search library.</p>
<p>The very first step of integrating any external library is to look at the code (often examples) to grasp an idea of what is to be achieved from R. Below is an example from the official documentation. First, an array of two <code>books</code> is defined; this is later used to test the search. Then another array of options is defined. This should at the very least include the key(s) that should be searched; here it is set to search through the title and authors. Then, the fuse object is initialised based on the array of books and the options. Finally, the <code>search</code> method is used to retrieve all books, the title or author of which partially match the term <code>tion</code>.</p>
<div class="sourceCode" id="cb358"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb358-1" title="1"><span class="co">// books to search through</span></a>
<a class="sourceLine" id="cb358-2" title="2"><span class="kw">var</span> books <span class="op">=</span> [<span class="op">{</span></a>
<a class="sourceLine" id="cb358-3" title="3">  <span class="st">&#39;ISBN&#39;</span><span class="op">:</span> <span class="st">&#39;A&#39;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb358-4" title="4">  <span class="st">&#39;title&#39;</span><span class="op">:</span> <span class="st">&quot;Old Man&#39;s War&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb358-5" title="5">  <span class="st">&#39;author&#39;</span><span class="op">:</span> <span class="st">&#39;John Scalzi&#39;</span></a>
<a class="sourceLine" id="cb358-6" title="6"><span class="op">},</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb358-7" title="7">  <span class="st">&#39;ISBN&#39;</span><span class="op">:</span> <span class="st">&#39;B&#39;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb358-8" title="8">  <span class="st">&#39;title&#39;</span><span class="op">:</span> <span class="st">&#39;The Lock Artist&#39;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb358-9" title="9">  <span class="st">&#39;author&#39;</span><span class="op">:</span> <span class="st">&#39;Steve Hamilton&#39;</span></a>
<a class="sourceLine" id="cb358-10" title="10"><span class="op">}</span>]</a>
<a class="sourceLine" id="cb358-11" title="11"></a>
<a class="sourceLine" id="cb358-12" title="12"><span class="kw">const</span> options <span class="op">=</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb358-13" title="13">  <span class="co">// Search in `author` and in `title` array</span></a>
<a class="sourceLine" id="cb358-14" title="14">  <span class="dt">keys</span><span class="op">:</span> [<span class="st">&#39;author&#39;</span><span class="op">,</span> <span class="st">&#39;title&#39;</span>]</a>
<a class="sourceLine" id="cb358-15" title="15"><span class="op">}</span></a>
<a class="sourceLine" id="cb358-16" title="16"></a>
<a class="sourceLine" id="cb358-17" title="17"><span class="co">// initialise</span></a>
<a class="sourceLine" id="cb358-18" title="18"><span class="kw">const</span> fuse <span class="op">=</span> <span class="kw">new</span> <span class="at">Fuse</span>(books<span class="op">,</span> options)</a>
<a class="sourceLine" id="cb358-19" title="19"></a>
<a class="sourceLine" id="cb358-20" title="20"><span class="co">// search &#39;tion&#39; in authors and titles</span></a>
<a class="sourceLine" id="cb358-21" title="21"><span class="kw">const</span> result <span class="op">=</span> <span class="va">fuse</span>.<span class="at">search</span>(<span class="st">&#39;tion&#39;</span>)</a></code></pre></div>
<p>With some understanding of what is to be reproduced in R, we can import the library with the <code>source</code> method, which takes a <code>file</code> argument that will accept a path or URL to a JavaScript file to source. Below we use the handy CDN (Content Delivery Network) to avoid downloading a file.</p>
<div class="sourceCode" id="cb359"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb359-1" title="1">uri &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb359-2" title="2">  <span class="st">&quot;https://cdnjs.cloudflare.com/ajax/&quot;</span>,</a>
<a class="sourceLine" id="cb359-3" title="3">  <span class="st">&quot;libs/fuse.js/3.4.6/fuse.min.js&quot;</span></a>
<a class="sourceLine" id="cb359-4" title="4">)</a>
<a class="sourceLine" id="cb359-5" title="5">engine<span class="op">$</span><span class="kw">source</span>(uri)</a>
<a class="sourceLine" id="cb359-6" title="6"><span class="co">#&gt; [1] &quot;true&quot;</span></a></code></pre></div>
<p>You can think of it as using the <code>script</code> tag in HTML to source (<code>src</code>) said file from disk or CDN.</p>
<div class="sourceCode" id="cb360"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb360-1" title="1"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb360-2" title="2">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb360-3" title="3">    <span class="kw">&lt;script</span> </a>
<a class="sourceLine" id="cb360-4" title="4"><span class="ot">      src=</span><span class="st">&#39;https://cdnjs.cloudflare.com/.../fuse.min.js&#39;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb360-5" title="5">    <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb360-6" title="6">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb360-7" title="7">  <span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb360-8" title="8">  <span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb360-9" title="9"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>Now onto replicating the array (list) which we want to search through, the <code>books</code> object used in a previous example. As already observed, this is in essence, how V8 stores data frames in the environment. Below we define a data frame of books that looks similar and load it into the engine.</p>
<div class="sourceCode" id="cb361"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb361-1" title="1">books &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</a>
<a class="sourceLine" id="cb361-2" title="2">  <span class="dt">title =</span> <span class="kw">c</span>(</a>
<a class="sourceLine" id="cb361-3" title="3">    <span class="st">&quot;Rights of Man&quot;</span>,</a>
<a class="sourceLine" id="cb361-4" title="4">    <span class="st">&quot;Black Swan&quot;</span>,</a>
<a class="sourceLine" id="cb361-5" title="5">    <span class="st">&quot;Common Sense&quot;</span>,</a>
<a class="sourceLine" id="cb361-6" title="6">    <span class="st">&quot;Sense and Sensibility&quot;</span></a>
<a class="sourceLine" id="cb361-7" title="7">  ),</a>
<a class="sourceLine" id="cb361-8" title="8">  <span class="dt">id =</span> <span class="kw">c</span>(<span class="st">&quot;a&quot;</span>, <span class="st">&quot;b&quot;</span>, <span class="st">&quot;c&quot;</span>, <span class="st">&quot;d&quot;</span>)</a>
<a class="sourceLine" id="cb361-9" title="9">)</a>
<a class="sourceLine" id="cb361-10" title="10"></a>
<a class="sourceLine" id="cb361-11" title="11">engine<span class="op">$</span><span class="kw">assign</span>(<span class="st">&quot;books&quot;</span>, books)</a></code></pre></div>
<p>Then again, we can make sure that the data frame was turned into a row-wise JSON object.</p>
<div class="sourceCode" id="cb362"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb362-1" title="1"><span class="kw">cat</span>(engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;JSON.stringify(books, null, 2);&quot;</span>))</a>
<a class="sourceLine" id="cb362-2" title="2"><span class="co">#&gt; [</span></a>
<a class="sourceLine" id="cb362-3" title="3"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb362-4" title="4"><span class="co">#&gt;     &quot;title&quot;: &quot;Rights of Man&quot;,</span></a>
<a class="sourceLine" id="cb362-5" title="5"><span class="co">#&gt;     &quot;id&quot;: &quot;a&quot;</span></a>
<a class="sourceLine" id="cb362-6" title="6"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb362-7" title="7"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb362-8" title="8"><span class="co">#&gt;     &quot;title&quot;: &quot;Black Swan&quot;,</span></a>
<a class="sourceLine" id="cb362-9" title="9"><span class="co">#&gt;     &quot;id&quot;: &quot;b&quot;</span></a>
<a class="sourceLine" id="cb362-10" title="10"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb362-11" title="11"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb362-12" title="12"><span class="co">#&gt;     &quot;title&quot;: &quot;Common Sense&quot;,</span></a>
<a class="sourceLine" id="cb362-13" title="13"><span class="co">#&gt;     &quot;id&quot;: &quot;c&quot;</span></a>
<a class="sourceLine" id="cb362-14" title="14"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb362-15" title="15"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb362-16" title="16"><span class="co">#&gt;     &quot;title&quot;: &quot;Sense and Sensibility&quot;,</span></a>
<a class="sourceLine" id="cb362-17" title="17"><span class="co">#&gt;     &quot;id&quot;: &quot;d&quot;</span></a>
<a class="sourceLine" id="cb362-18" title="18"><span class="co">#&gt;   }</span></a>
<a class="sourceLine" id="cb362-19" title="19"><span class="co">#&gt; ]</span></a></code></pre></div>
<p>Now we can define options for the search; we don’t get into the details of fuse.js here as this is not the purpose of this book. You can read more about the options in the <a href="https://fusejs.io/#Examples">examples section</a> of the site. We can mimic the format of the JSON options shown on the website with a simple list and assign that to a new variable in the engine. Note that we wrap the title in a <code>list</code> to ensure it is converted to an array of length 1: <code>list("title")</code> should be converted to a <code>["title"]</code> array and not a <code>"title"</code> scalar.</p>
<div class="sourceCode" id="cb363"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb363-1" title="1"><span class="co">// JavaScript</span></a>
<a class="sourceLine" id="cb363-2" title="2"><span class="kw">var</span> options <span class="op">=</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb363-3" title="3">  <span class="dt">keys</span><span class="op">:</span> [<span class="st">&#39;title&#39;</span>]<span class="op">,</span></a>
<a class="sourceLine" id="cb363-4" title="4">  <span class="dt">id</span><span class="op">:</span> <span class="st">&#39;id&#39;</span></a>
<a class="sourceLine" id="cb363-5" title="5"><span class="op">}</span></a></code></pre></div>
<div class="sourceCode" id="cb364"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb364-1" title="1"><span class="co"># R</span></a>
<a class="sourceLine" id="cb364-2" title="2">options &lt;-<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb364-3" title="3">  <span class="dt">keys =</span> <span class="kw">list</span>(<span class="st">&quot;title&quot;</span>),</a>
<a class="sourceLine" id="cb364-4" title="4">  <span class="dt">id =</span> <span class="st">&quot;id&quot;</span></a>
<a class="sourceLine" id="cb364-5" title="5">)</a>
<a class="sourceLine" id="cb364-6" title="6"></a>
<a class="sourceLine" id="cb364-7" title="7">engine<span class="op">$</span><span class="kw">assign</span>(<span class="st">&quot;options&quot;</span>, options)</a></code></pre></div>
<p>Then we can finish the second step of the online examples, instantiate a fuse.js object with the books and options objects, then do a search, the result of which is assigned to an object which is retrieved in R with <code>get</code>.</p>
<div class="sourceCode" id="cb365"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb365-1" title="1">engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;var fuse = new Fuse(books, options)&quot;</span>)</a>
<a class="sourceLine" id="cb365-2" title="2">engine<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;var results = fuse.search(&#39;sense&#39;)&quot;</span>)</a>
<a class="sourceLine" id="cb365-3" title="3">engine<span class="op">$</span><span class="kw">get</span>(<span class="st">&quot;results&quot;</span>)</a>
<a class="sourceLine" id="cb365-4" title="4"><span class="co">#&gt; [1] &quot;d&quot; &quot;c&quot;</span></a></code></pre></div>
<p>A search for “sense” returns a vector of ids where the term “sense” was found; <code>c</code> and <code>d</code> or the books <em>Common Sense</em>, <em>Sense and Sensibility</em>. We could perhaps make that last code simpler using the <code>call</code> method.</p>
<div class="sourceCode" id="cb366"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb366-1" title="1">engine<span class="op">$</span><span class="kw">call</span>(<span class="st">&quot;fuse.search&quot;</span>, <span class="st">&quot;sense&quot;</span>)</a>
<a class="sourceLine" id="cb366-2" title="2"><span class="co">#&gt; [1] &quot;d&quot; &quot;c&quot;</span></a></code></pre></div>
</div>
<div id="v8-npm" class="section level2">
<h2><span class="header-section-number">18.4</span> NPM Packages</h2>
<p>We can also use <a href="https://www.npmjs.com/">npm</a> packages, though not all will work. NPM is Node’s package manager, or in a sense Node’s equivalent of CRAN.</p>
<p>To use NPM packages we need <a href="http://browserify.org/">browserify</a>, a node library to bundle all dependencies of an NPM package into a single file, which can subsequently be imported in V8. Browserify is itself an NPM package, and therefore requires Node.js to be installed. The reason browserify is required will be covered in more depth in chapter 20, in essence, NPM assumes disk access to load dependencies in <code>require()</code> (JavaScript) statements. This will not work with V8. Browserify will bundle all the files that comprise an NPM module into a single file that does not require disk access.</p>
<p>You can install browserify globally with the following the <code>g</code> flag. Once Node.js installed, browserify can be installed from the <em>terminal</em> (not R console) with the <code>npm</code> command.</p>
<div class="sourceCode" id="cb367"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb367-1" title="1"><span class="ex">npm</span> install -g browserify</a></code></pre></div>
<p>We can now “browserify” an npm package. To demonstrate, we will use <a href="https://github.com/zeit/ms">ms</a>, which converts various time formats to milliseconds. First, we install the npm package.</p>
<div class="sourceCode" id="cb368"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb368-1" title="1"><span class="ex">npm</span> install ms</a></code></pre></div>
<p>Then we browserify it. From the terminal, the first line creates a file called <code>in.js</code> which contains <code>global.ms = require('ms');</code> we then call browserify on that file specifying <code>ms.js</code> as output file. The <code>require</code> function in JavaScript is used to import files, <code>require('ms')</code> imports <code>ms.js</code>, it’s to some extend like <code>source("ms.R")</code>.</p>
<div class="sourceCode" id="cb369"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb369-1" title="1"><span class="bu">echo</span> <span class="st">&quot;global.ms = require(&#39;ms&#39;);&quot;</span> <span class="op">&gt;</span> in.js</a>
<a class="sourceLine" id="cb369-2" title="2"><span class="ex">browserify</span> in.js -o ms.js</a></code></pre></div>
<p>We can now source <code>ms.js</code> with V8. Before we do so we ought to look at example code to see what has to be reproduced using V8. Luckily the library is very straightforward: it includes a single function for all conversions, e.g.: <code>ms('2 days')</code> to convert two days in milliseconds.</p>
<div class="sourceCode" id="cb370"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb370-1" title="1"><span class="kw">library</span>(V8)</a>
<a class="sourceLine" id="cb370-2" title="2"></a>
<a class="sourceLine" id="cb370-3" title="3">ms &lt;-<span class="st"> </span><span class="kw">v8</span>()</a>
<a class="sourceLine" id="cb370-4" title="4">ms<span class="op">$</span><span class="kw">source</span>(<span class="st">&quot;ms.js&quot;</span>)</a></code></pre></div>
<p>Then using the library simply consists of using <code>eval</code> or preferably <code>call</code> (for cleaner code and data interpretation to R).</p>
<div class="sourceCode" id="cb371"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb371-1" title="1">ms<span class="op">$</span><span class="kw">eval</span>(<span class="st">&quot;ms(&#39;2 days&#39;)&quot;</span>)</a>
<a class="sourceLine" id="cb371-2" title="2"><span class="co">#&gt; [1] &quot;172800000&quot;</span></a>
<a class="sourceLine" id="cb371-3" title="3">ms<span class="op">$</span><span class="kw">call</span>(<span class="st">&quot;ms&quot;</span>, <span class="st">&quot;2s&quot;</span>) <span class="co"># 2 seconds</span></a>
<a class="sourceLine" id="cb371-4" title="4"><span class="co">#&gt; [1] 2000</span></a></code></pre></div>
</div>
<div id="v8-pkg" class="section level2">
<h2><span class="header-section-number">18.5</span> Use in Packages</h2>
<p>In this section, we detail how one should go about using V8 in an R package. If you are not familiar with package development you can skip ahead. We start by creating a package called “ms” that will hold functionalities we explored in the previous section on NPM packages.</p>
<div class="sourceCode" id="cb372"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb372-1" title="1">usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&#39;ms&#39;</span>)</a></code></pre></div>
<p>The package is going to rely on V8 so it needs to be added under <code>Imports</code> in the <code>DESCRIPTION</code> file, then again this can be done with usethis as shown below.</p>
<div class="sourceCode" id="cb373"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb373-1" title="1"><span class="co"># add V8 to DESCRIPTION</span></a>
<a class="sourceLine" id="cb373-2" title="2">usethis<span class="op">::</span><span class="kw">use_package</span>(<span class="st">&quot;V8&quot;</span>)</a></code></pre></div>
<p>The package should also include the external library <code>ms.js</code> browserified from the NPM package, which should be placed it in the <code>inst</code> directory. Create it and place the <code>ms.js</code> file within the latter.</p>
<div class="sourceCode" id="cb374"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb374-1" title="1"><span class="kw">dir.create</span>(<span class="st">&quot;inst&quot;</span>)</a></code></pre></div>
<p>As explored, the core of the V8 package is the execution environment(s) that are spawned using the <code>v8</code> function. One could perhaps provide a function that returns the object created by <code>v8</code>, but it would not be convenient: this function would need to be called explicitly by the users of the package, and the output of it would need to be passed to every subsequent function. Thankfully there is a better way.</p>
<p>Instead, we can use the function <code>.onLoad</code>, to create the execution environment and import the dependency when the package is loaded by the user.</p>
<p>You can read more about this function in Hadley Wickham’s <a href="http://r-pkgs.had.co.nz/r.html"><em>Advanced R</em> book</a>. This is, in effect, very similar to how the Python integration of R, <a href="https://rstudio.github.io/reticulate">reticulate</a> <span class="citation">(Ushey, Allaire, and Tang <a href="#ref-R-reticulate">2020</a>)</span>, is <a href="https://rstudio.github.io/reticulate/articles/package.html">used in packages</a>. This function is often placed in a <code>zzz.R</code> file.</p>
<div class="sourceCode" id="cb375"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb375-1" title="1"><span class="co"># zzz.R</span></a>
<a class="sourceLine" id="cb375-2" title="2">ms &lt;-<span class="st"> </span><span class="ot">NULL</span></a>
<a class="sourceLine" id="cb375-3" title="3"></a>
<a class="sourceLine" id="cb375-4" title="4">.onLoad &lt;-<span class="st"> </span><span class="cf">function</span>(libname, pkgname){</a>
<a class="sourceLine" id="cb375-5" title="5">  ms &lt;&lt;-<span class="st"> </span>V8<span class="op">::</span><span class="kw">v8</span>()</a>
<a class="sourceLine" id="cb375-6" title="6">}</a></code></pre></div>
<p>At this stage the package’s directory structure should look similar to the tree below.</p>
<div class="sourceCode" id="cb376"><pre class="sourceCode bash"><code class="sourceCode bash"><a class="sourceLine" id="cb376-1" title="1"><span class="ex">.</span></a>
<a class="sourceLine" id="cb376-2" title="2">├── <span class="ex">DESCRIPTION</span></a>
<a class="sourceLine" id="cb376-3" title="3">├── <span class="ex">NAMESPACE</span></a>
<a class="sourceLine" id="cb376-4" title="4">├── <span class="ex">R</span></a>
<a class="sourceLine" id="cb376-5" title="5">│   └── <span class="ex">zzz.R</span></a>
<a class="sourceLine" id="cb376-6" title="6">└── <span class="ex">inst</span></a>
<a class="sourceLine" id="cb376-7" title="7">    └── <span class="ex">ms.js</span></a></code></pre></div>
<p>Now the dependency can be sourced in the <code>.onLoad</code> function. We can locate the files in the <code>inst</code> directory with the <code>system.file</code> function.</p>
<div class="sourceCode" id="cb377"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb377-1" title="1"><span class="co"># zzz.R</span></a>
<a class="sourceLine" id="cb377-2" title="2">ms &lt;-<span class="st"> </span><span class="ot">NULL</span></a>
<a class="sourceLine" id="cb377-3" title="3"></a>
<a class="sourceLine" id="cb377-4" title="4">.onLoad &lt;-<span class="st"> </span><span class="cf">function</span>(libname, pkgname){</a>
<a class="sourceLine" id="cb377-5" title="5">  ms &lt;&lt;-<span class="st"> </span>V8<span class="op">::</span><span class="kw">v8</span>()</a>
<a class="sourceLine" id="cb377-6" title="6"></a>
<a class="sourceLine" id="cb377-7" title="7">  <span class="co"># locate dependency file</span></a>
<a class="sourceLine" id="cb377-8" title="8">  dep &lt;-<span class="st"> </span><span class="kw">system.file</span>(<span class="st">&quot;ms.js&quot;</span>, <span class="dt">package =</span> <span class="st">&quot;ms&quot;</span>)</a>
<a class="sourceLine" id="cb377-9" title="9">  ms<span class="op">$</span><span class="kw">source</span>(dep)</a>
<a class="sourceLine" id="cb377-10" title="10">}</a></code></pre></div>
<p>We can then create a <code>to_ms</code> function. It will have access to the <code>ms</code> object we instantiated in <code>.onLoad</code>.</p>
<div class="sourceCode" id="cb378"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb378-1" title="1"><span class="co">#&#39; @export</span></a>
<a class="sourceLine" id="cb378-2" title="2">to_ms &lt;-<span class="st"> </span><span class="cf">function</span>(string){</a>
<a class="sourceLine" id="cb378-3" title="3">  ms<span class="op">$</span><span class="kw">call</span>(<span class="st">&quot;ms&quot;</span>, string)</a>
<a class="sourceLine" id="cb378-4" title="4">}</a></code></pre></div>
<p>After running <code>devtools::document()</code> and installing the package with <code>devtools::install()</code>, it’s ready to be used.</p>
<div class="sourceCode" id="cb379"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb379-1" title="1">ms<span class="op">::</span><span class="kw">to_ms</span>(<span class="st">&quot;10 hrs&quot;</span>)</a>
<a class="sourceLine" id="cb379-2" title="2"><span class="co">#&gt; [1] 36000000</span></a></code></pre></div>

</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-reticulate">
<p>Ushey, Kevin, JJ Allaire, and Yuan Tang. 2020. <em>Reticulate: Interface to ’Python’</em>. <a href="https://CRAN.R-project.org/package=reticulate">https://CRAN.R-project.org/package=reticulate</a>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="shiny-widgets.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="v8-ml.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/6-01-computations-v8.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
